import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import React, { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import "./index.less";

const homeIcon = require("@/assets/images/tabbar/home_2.png");
const homeIconActive = require("@/assets/images/tabbar/home_1.png");
const myIcon = require("@/assets/images/tabbar/my_2.png");
const myIconActive = require("@/assets/images/tabbar/my_1.png");
const fastIcon = require("@/assets/images/tabbar/fast.png");

const pathes = ["/home", "/fast", "/mine"];

export default function NavTab() {
  const [value, setValue] = useState(0);
  const nav = useNavigate();
  const location = useLocation();
  return (
    <div
      className="btm-nav"
      style={{ display: pathes.includes(location.pathname) ? "block" : "none" }}
    >
      <BottomNavigation
        showLabels
        value={value}
        onChange={(event, newValue) => {
          nav(pathes[newValue]);
          setValue(newValue);
        }}
      >
        <BottomNavigationAction
          label="首页"
          icon={<img src={value === 0 ? homeIconActive : homeIcon} />}
        />
        <BottomNavigationAction
          label="快速刷题"
          icon={<img src={fastIcon} />}
        />
        <BottomNavigationAction
          label="我的"
          icon={<img src={value === 2 ? myIconActive : myIcon} />}
        />
      </BottomNavigation>
    </div>
  );
}
